<template>
	<view>
		<view class="page page-index">
			<fy-dropdown :menuList="menuList">
				<fy-dropdown-item v-model="subjectValue" dropdownKey="subject" :options="subjectOptions"
					@change="handlerSubjectChange"></fy-dropdown-item>
				<fy-dropdown-item v-model="statusValue" dropdownKey="status" :options="statusOptions"
					@change="handlerTypeChange"></fy-dropdown-item>
			</fy-dropdown>
		</view>
		<view>
			<br />
		</view>
		<view class="index-container">
			<view class="order">
				<view class="orderItem">
					<view class="top">
						<view class="title">
							作业
						</view>
					</view>
					<view class="bottom">
						<view class="orderInfo" v-for="(item,index) in jobList" :key="index">
							<view class="orderInfo-Left">
								<image src="../../static/Icon/index/Anno.png" mode=""></image>
							</view>
							<view class="orderInfo-Right">
								<view class="orderInfo-Right-Left">
									<view class="orderInfo-Right-Left-Top">
										{{item.subject}}
									</view>
									<view class="orderInfo-Right-Left-Bottom">
										{{item.content}}
									</view>
								</view>
								<view class="orderInfoRight-Right">
									<view class="bottonWait" v-if="item.jobSubmit.status=='a'"
										@click="PostJob(item.jobSubmit.id)">
										<text>待审批</text>
									</view>
									<view class="bottonWait" v-if="item.jobSubmit.status=='b'"
										@click="submitJob(item.jobSubmit.id)">
										<text>已审批</text>
									</view>
									<view class="bottonUn" v-if="item.jobSubmit.status=='c'"
										@click="PostJob(item.jobSubmit.id)">
										<text>未提交</text>
									</view>
								</view>
							</view>
						</view>
						<view class="noData" v-if="jobList.length == 0">
							<image src="../../static/Icon/index/noData.png" mode=""></image>
							<view>
								暂无作业
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				jobList: [],
				value1: 1,
				value2: 2,
				menuList: [{
					title: '学科',
					dropdownKey: 'subject'
				}, {
					title: '状态',
					dropdownKey: 'status'
				}],
				subjectValue: '',
				subjectOptions: [{
						label: '语文',
						value: null,
						flag: false
					}, {
						label: '数学',
						value: null,
						flag: false
					}, {
						label: '英语',
						value: null,
						flag: false
					}, {
						label: '物理',
						value: null,
						flag: false
					}, {
						label: '化学',
						value: null,
						flag: false
					}, {
						label: '生物',
						value: null,
						flag: false
					}, {
						label: '政治',
						value: null,
						flag: false
					},
					{
						label: '历史',
						value: null,
						flag: false
					},
					{
						label: '地理',
						value: null,
						flag: false
					}
				],
				statusValue: '',
				statusOptions: [{
					label: '未提交',
					value: "c"
				}, {
					label: '待审批',
					value: "a"
				}, {
					label: '已审批',
					value: "b"
				}],

				jobSubmitVo: {
					jobVo: {
						job: {
							managerId: null,
							submitStatus: null

						},
						page: 1
					},
					studentId: ""
				},
				studentId: 1

			};
		},
		onReady() {},
		onLoad() {
			this.getJobs();
			this.getSubject();
			this.studentId = uni.getStorageSync('studentId');
		},
		methods: {
			getSubject() {
				this.$myReq({
						url: `/job/api/jobSubmit/getAllTeacherByStudentId/` + this.studentId,
						method: 'get',
					})
					.then((res) => {
						console.log(res.data)
						let subjects = res.data
						console.log(res.data.length)
						for (let i = 0; i < res.data.length; i++) {
							console.log(res.data[i])
							for (let j = 0; j < this.subjectOptions.length; j++) {
								if (res.data[i].subject == this.subjectOptions[j].label) {
									this.subjectOptions[j].value = res.data[i].id;
									this.subjectOptions[j].flag = true;
								}
							}
						}
						// for (let j = 0; j < this.subjectOptions.length; j++) {
						// 	if (this.subjectOptions[j].flag == false) {
						// 		console.log(this.subjectOptions[j])
						// 		this.subjectOptions[j]=null
						// 		this.subjectOptions.pop(this.subjectOptions[j]);
						// 	}
						// }
						this.subjectOptions = this.subjectOptions.filter(b =>  b.flag === true)
						console.log(this.subjectOptions)
					})
					.catch((err) => {
						console.log(err)
					})
			},
			//根据登录的学生id查询作业
			getJobs() {
				this.jobSubmitVo.studentId = uni.getStorageSync('studentId');
				this.$myReq({
						url: `/job/api/jobSubmit/list`,
						method: 'post',
						data: this.jobSubmitVo
					})
					.then((res) => {
						console.log(res.data.data)
						this.jobList = res.data.data
					})
					.catch((err) => {
						console.log(err)
					})
			},
			//作业页面
			submitJob(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/Job/submitJob?id=' + id
				});

			},
			PostJob(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/Job/PostJob?id=' + id
				});
			},
			handlerSubjectChange(e) {
				this.jobSubmitVo.jobVo.job.managerId = e;
				this.getJobs();
			},
			handlerTypeChange(e) {
				this.jobSubmitVo.jobVo.job.submitStatus = e;
				console.log(e)
				this.getJobs();
			},

		}
	}
</script>

<style lang="scss">
	// box-shadow: 0rpx 0rpx 4rpx 4rpx #e1e1e1;
	page {
		background-color: #f2f2f6;
		/* f6f6f8 */
	}

	.header {
		padding: 10rpx 30rpx 20rpx 30rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.left {
			// border: 1px solid red;
			// line-height: 50rpx;
			// height: 80rpx;
			font-size: 40rpx;
			font-weight: bold;
			line-height: 50rpx;
		}

		.right {
			display: flex;
			flex-wrap: wrap;

			image {
				height: 40rpx;
				width: 40rpx;
				// border: 1px solid red;
				margin-right: 15rpx;
			}

			view {
				// border: 1px solid red;
				line-height: 40rpx;
				font-size: 30rpx;

			}
		}
	}

	.anno {
		padding: 20rpx 15rpx 20rpx 15rpx;
		// border: 1px solid red;
		background-color: #f7f7fa;

		.annoBox {
			box-shadow: 0rpx 0rpx 4rpx 4rpx #ececec;
			// border: 1px solid red;
			border-radius: 30rpx;
			background-color: #FFFFFF;
			overflow: hidden;

			swiper {
				swiper-item {
					background-image: url(https://s4.ax1x.com/2021/12/11/oHAzV0.png);
					background-repeat: no-repeat;
					background-size: 100%;
					background-position: 0% 0%;

					// border: 1px solid yellow;
					text {
						position: relative;
						font-size: 40rpx;
						font-weight: bold;
						width: 450rpx;
						line-height: 70rpx;
						width: 400rpx;
						top: 70rpx;
						left: 40rpx;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: normal !important;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						// border: 1px solid red;
						color: white;
					}
				}
			}

			.annoBottomBox {
				// border: 1px solid red;
				padding-left: 35rpx;
				height: 90rpx;
				line-height: 90rpx;
				display: flex;
				flex-wrap: wrap;

				text:nth-child(1) {
					margin-right: 20rpx;
					line-height: 90rpx;
					height: 90rpx;
					font-size: 40rpx;
					color: #ff9200;
				}

				.arr {
					height: 90rpx;
					display: inline-block;
					// border: 1px solid red;
					font-size: 40rpx;
					line-height: 96rpx;
				}
			}
		}
	}

	.function {
		padding: 0rpx 15rpx 20rpx 15rpx;

		// background-color: #f7f7fa;
		.functionItem {
			box-shadow: 0rpx 2rpx 4rpx 4rpx #ececec;
			border-radius: 30rpx;
			padding: 30rpx 35rpx 30rpx 35rpx;
			background-color: #FFFFFF;

			.top {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				border-bottom: 1px solid #e1e1e1;

				// padding-bottom: 10rpx;
				.title {
					border-bottom: 2px solid $main-colorB;
					padding-bottom: 10rpx;
					// border: 1px solid red;
					height: 50rpx;
					font-size: 35rpx;
					line-height: 50rpx;
				}

				.arr {
					display: flex;
					flex-wrap: wrap;
					height: 50rpx;
					font-size: 30rpx;
					line-height: 70rpx;
					color: $main-garyB;

					// border: 1px solid red;
					text {
						font-size: 35rpx;
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.functionIcon:nth-child(1) {
					margin-bottom: 20rpx;
				}

				.functionIcon {
					width: 150rpx;

					.Icon {
						width: 110rpx;
						height: 110rpx;
						// border: 1px solid red;
						margin: 0 auto;

						image {
							width: 100%;
							height: 100%;
						}

						margin-bottom: 10rpx;
					}

					.content {
						// border: 1px solid red;
						text-align: center;
						color: #4a4a4a;
						width: 150rpx;
						font-size: 25rpx;
					}
				}
			}
		}
	}

	.order {
		padding: 0rpx 15rpx 20rpx 15rpx;

		.orderItem {
			box-shadow: 0rpx 2rpx 4rpx 4rpx #ececec;
			border-radius: 30rpx;
			padding: 30rpx 35rpx 10rpx 35rpx;
			background-color: #FFFFFF;

			.top {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				border-bottom: 1px solid #e1e1e1;
				margin-bottom: 20rpx;

				// padding-bottom: 10rpx;
				.title {
					border-bottom: 2px solid $main-colorB;
					padding-bottom: 10rpx;
					// border: 1px solid red;
					height: 50rpx;
					font-size: 35rpx;
					line-height: 50rpx;
				}

				.arr {
					display: flex;
					flex-wrap: wrap;
					height: 50rpx;
					font-size: 30rpx;
					line-height: 70rpx;
					color: $main-garyB;

					// border: 1px solid red;
					text {
						font-size: 35rpx;
					}
				}
			}

			.bottom {

				// height: 500rpx;
				.orderInfo {
					display: flex;
					flex-wrap: wrap;
					height: 100rpx;
					margin-top: 10rpx;
					margin-bottom: 10rpx;

					.orderInfo-Left {
						display: flex;
						align-items: center;
						height: 100rpx;
						width: 100rpx;

						image {
							height: 60rpx;
							width: 66rpx;
						}
					}

					.orderInfo-Right {
						// border: 1px solid red;
						border-bottom: 1px solid #ececec;
						padding-bottom: 5rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						height: 100rpx;
						width: 555rpx;

						// 550
						.orderInfo-Right-Left {
							// border: 1px solid blue;
							height: 100rpx;

							// margin-top: 10rpx;
							.orderInfo-Right-Left-Top {
								font-size: 35rpx;
								// border: 1px solid red;
								margin-bottom: 10rpx;
							}

							.orderInfo-Right-Left-Bottom {
								font-size: 25rpx;
								// border: 1px solid red;
								color: $main-garyB;
								// position: relative;
								// top: 10rpx;
							}
						}

						.orderInfoRight-Right {
							// border: 1px solid green;
							width: 120rpx;
							display: flex;
							align-items: center;

							.botton {
								text-align: center;
								line-height: 60rpx;
								border-radius: 10rpx;
								background-color: #dadada;
								// border: 1px solid #919191;
								color: #3b3b3b;
								width: 120rpx;
								height: 60rpx;
							}

							.bottonWait {
								text-align: center;
								line-height: 60rpx;
								border-radius: 10rpx;
								background-color: #e3ffd8;
								// border: 1px solid #919191;
								color: seagreen;
								width: 120rpx;
								height: 60rpx;
							}

							.bottonUn {
								text-align: center;
								line-height: 60rpx;
								border-radius: 10rpx;
								background-color: #daadae;
								// border: 1px solid #919191;
								color: #c87c8c;
								width: 120rpx;
								height: 60rpx;
							}
						}
					}
				}
			}
		}

		.noData {
			margin: 0 auto;
			width: 250rpx;
			margin-bottom: 40rpx;

			image {
				width: 250rpx;
				height: 250rpx;
			}

			view {
				text-align: center;
				color: $main-garyB;
			}
		}
	}
</style>
